<template>
    <div class="content">
       <h1 class="title" style="line-height: 80px;">
           <slot name="title"></slot>
       </h1>
       <ul v-if="songList.length!=0">
           <li>
               <div class="song-item">
                   <span class="item-index"></span>
                   <span class="item-title">歌曲名</span>
                   <span class="item-name">歌手</span>
                   <span class="item-intro">专辑</span>
               </div>
           </li>
           <li v-for="(item,index) in songList" :key="index">
               <div class="song-item" @click="toplay(item.id,item.url,item.pic,index,item.name,item.lyric)">
                   <span class="item-index">
                       {{index + 1}}
                   </span>
                   <span class="item-title">{{replaceFName(item.name)}}</span>
                   <span class="item-name">{{replaceLName(item.name)}}</span>
                   <span class="item-intro">{{item.introduction}}</span>
                   <div class="item-collect" @click.stop="toCollect(item)">
                        <svg :class="{active:item.userCollect&&loginIn}" class="icon" style="color:rgb(158, 158, 158);">
                            <use xlink:href="#icon-xihuan-shi"></use>
                        </svg>
                    </div>
               </div>
           </li>
       </ul>
       <div style="text-align: center;" v-else>
            <img src="../assets/img/zhangyuge.jpg" alt="" style="width: 120px; margin-top: 30px;">
            <p style="line-height: 80px;">暂无歌曲 ~</p>
       </div>
    </div>
</template>
<script>
import {mapGetters} from "vuex";
import {mixin} from "../mixins";
import {setCollect,delCollect} from '../api/index'
export default {
    name: 'album-content',
    mixins: [mixin],
    props:[
        'songList'
    ],
    computed:{
        ...mapGetters(['userId','loginIn'])
    },
    methods:{
        toCollect(item){
            if(!this.loginIn){
                this.notify('请先登录','warning')
                return;
            }
            if(item.userCollect){
                let params = new URLSearchParams();
                params.append('userId',this.userId);
                params.append('songId',item.id);
                delCollect(params).then(res=>{
                    if(res){
                        this.notify('取消收藏成功','success')
                    }else{
                        this.notify('取消收藏失败','error')
                    }
                })
            }else{
                let params = new URLSearchParams();
                params.append('userId',this.userId);
                params.append('type',0);
                params.append('songId',item.id);
                setCollect(params).then(res=>{
                    this.notify("收藏成功",'success')
                    // console.log(res,"收藏成功");
                })
            }
            if(this.$parent.getCollection){
                this.$parent.getCollection(this.userId)
                console.log('获取收藏列表');
                this.$router.go(0)
            }else if(this.$parent.getSongId){
                this.$parent.getSongId()
                console.log('获取歌单列表');
                this.$router.go(0)
            }else if(this.$parent.getSongOfSingerId){
                this.$parent.getSongOfSingerId()
                console.log('获取歌手列表');
                this.$router.go(0)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/album-content.scss';
</style>